<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <script type="text/javascript" src="javascript/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="javascript/jquery.form.js"></script>
    <script type="text/javascript" src="javascript/atmosphere.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            var detectedTransport = null;
            var socket = atmosphere;
            var subSocket;

            function getKeyCode(ev) {
                if (window.event) return window.event.keyCode;
                return ev.keyCode;
            }

            function getElementById() {
                return document.getElementById(arguments[0]);
            }

            function getURL() {
                return document.getElementById("api").options[document.getElementById("api").selectedIndex].id;
            }

            function getElementByIdValue() {
                detectedTransport = null;
                return document.getElementById(arguments[0]).value;
            }

            function subscribe() {
                unsubscribe();

                var request = { url : document.location.toString() + 'a/' + getElementByIdValue('api') + getElementByIdValue('topic') ,
                                transport: getElementByIdValue('transport') };

                request.onMessage = function (response) {
                    detectedTransport = response.transport;
                    if (response.status == 200) {
                        var data = response.responseBody;
                        if (data.length > 0) {
                            $('ul').prepend($('<li></li>').text("[API] " + getURL() + " [Message]: " + data + " [Detected transport]: " + detectedTransport));
                        }
                    }
                };

                subSocket = socket.subscribe(request);

            }

            function unsubscribe() {
                socket.unsubscribe();
            }

            function connect() {
                getElementById('phrase').value = '';
                getElementById('sendMessage').className = '';
                getElementById('phrase').focus();
                subscribe();
                getElementById('connect').value = "Switch transport";
            }

            getElementById('connect').onclick = function(event) {
                if (getElementById('topic').value == '') {
                    alert("Please enter a PubSub topic to subscribe");
                    return;
                }
                connect();
            }
            getElementById('topic').onkeyup = function(event) {
                getElementById('sendMessage').className = 'hidden';
                var keyc = getKeyCode(event);
                if (keyc == 13 || keyc == 10) {
                    connect();
                    return false;
                }
            }

            getElementById('phrase').setAttribute('autocomplete', 'OFF');
            getElementById('phrase').onkeyup = function(event) {
                var keyc = getKeyCode(event);
                if (keyc == 13 || keyc == 10) {

                    var m = " sent using " + detectedTransport;
                    if (detectedTransport == null) {
                        detectedTransport = getElementByIdValue('transport');
                        m = " sent trying to use " + detectedTransport;
                    }

                    subSocket.push({data: 'message=' + getElementByIdValue('phrase') + m});

                    getElementById('phrase').value = '';
                    return false;
                }
                return true;
            };

            getElementById('send_message').onclick = function(event) {
                if (getElementById('topic').value == '') {
                    alert("Please enter a message to publish");
                    return;
                }

                var m = " sent using " + detectedTransport;
                if (detectedTransport == null) {
                    detectedTransport = getElementByIdValue('transport');
                    m = " sent trying to use " + detectedTransport;
                }

                subSocket.push({data: 'message=' + getElementByIdValue('phrase') + m});

                getElementById('phrase').value = '';
                return false;
            };

            getElementById('topic').focus();
        });
    </script>
    <style type='text/css'>
        div {
            border: 0px solid black;
        }

        input#phrase {
            width: 30em;
            background-color: #e0f0f0;
        }

        input#topic {
            width: 14em;
            background-color: #e0f0f0;
        }

        div.hidden {
            display: none;
        }

        span.from {
            font-weight: bold;
        }

        span.alert {
            font-style: italic;
        }
    </style>
</head>
<body>
<h1>Atmosphere Framework @ Devoxx 2011</h1>

<h2>Select API</h2>

<div id='select_api'>
    <select id="api">
        <option id="AtmosphereHandler" value="ah/">AtmosphereHandler</option>
        <option id="Meteor" value="meteor/">Meteor</option>
        <option id="Resource" value="resource/">Resource</option>
        <option id="WebSocketProtocol" value="resource/">WebSocketProtocol</option>
    </select>
</div>
<h2>Enter topic</h2>

<div id='pubsub'>
    <input id='topic' type='text'/>
</div>
<h2>Select transport to use for subscribing</h2>

<div id='select_transport'>
    <select id="transport">
        <option id="autodetect" value="websocket">autodetect</option>
        <option id="long-polling" value="long-polling">long-polling</option>
        <option id="streaming" value="streaming">http streaming</option>
        <option id="websocket" value="websocket">websocket</option>
    </select>
    <input id='connect' class='button' type='submit' name='connect' value='Connect'/>
</div>
<br/>
<br/>

<h2 id="s_h" class='hidden'>Publish Topic</h2>

<div id='sendMessage' class='hidden'>
    <input id='phrase' type='text'/>
    <input id='send_message' class='button' type='submit' name='Publish' value='Publish Message'/>
</div>
<br/>

<h2>Real Time PubSub Update</h2>
<ul></ul>
</body>
</html>
